// 导入 snabbdom
import { h, init } from 'snabbdom'

// 对比两个 vnode 的差异，将差异更新到真是 dom
let patch = init([])
// 第一个参数：标签 + 选择器
// 第二个参数：如果是字符串就是标签的内容
let vnode = h('div#container.cls', [
  h('h1', 'Hello Snabbdom'),
  h('p', '这是一个 p 标签')
])

let app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

setTimeout(() => {
  vnode = h('div#container.cls', [
    h('h1', '新标题'),
    h('p', '这是一个新的 p 标签')
  ])
  oldVnode = patch(oldVnode, vnode)

  // 清空页面
  // patch(oldVnode, null) 错误

  // 创建注释节点清空页面
  patch(oldVnode, h('!'))
}, 2000)
